<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
#parse("/WEB-INF/views_webapp/layout/css2.html")
#parse("/WEB-INF/views_webapp/layout/base.html")
<title>
#if($shelfName && $shelfName != "")
  $!{shelfName}
#else
  咕哒猎人
#end
</title>
<style type="text/css">
body{
	background: #eee;
	padding-bottom: 1rem;
	overflow: auto;
}
</style>
</head>
<body>

<!--顶部两个指数-->
<div id="tinfo" class="jflex">
	<div class="tinfo-bar">本FOODBAR</div>
	<div class="tinfo-point">
		<img class="tp-img" src="${path}/static/res/webapp/img/po.png" />
	</div>
	<div class="tlable">咕哒健康度：</div>
	#if($healthLevel < 0.01 )
	<div class="tinfo-bar hb1">正常</div>
	#elseif( $healthLevel >= 0.01 && $healthLevel < 0.03)
	<div class="tinfo-bar hb2">低烧</div>
	#elseif( $healthLevel >= 0.03 && $healthLevel < 0.05)
	<div class="tinfo-bar hb3">高烧</div>
	#elseif( $healthLevel >= 0.05 && $healthLevel < 0.1)
	<div class="tinfo-bar hb4">昏厥</div>
	#elseif( $healthLevel >= 0.1)
	<div class="tinfo-bar hb5">弥留</div>
	#end
	<div class="tinfo-point">
		<img class="tp-img" src="${path}/static/res/webapp/img/po.png" />
	</div>
	<div class="tlable">咕哒满意度：</div>
	
	#if($satisfaction < 100 )
	<div class="tinfo-bar hb21">饥饿</div>
	#elseif( $satisfaction >= 100 && $satisfaction < 200)
	<div class="tinfo-bar hb22">半饱</div>
	#elseif( $satisfaction >= 200 && $satisfaction < 500)
	<div class="tinfo-bar hb23">小满足</div>
	#elseif( $satisfaction >= 500 && $satisfaction < 1000)
	<div class="tinfo-bar hb24">大满足</div>
	#elseif( $satisfaction >= 1000)
	<div class="tinfo-bar hb25">肉灵合一</div>
	#end
	<div class="tb-ricon flex1">
		<i id="tb-ricon-i" class="iconfont icon-jikediancanicon13"></i>
	</div>
	
	<div id="tinfo-detail" class="tinfo-detail hide animated">
		<div class="jflex tifon-detailbox">
			<div class="detail-icon">
				#if($healthLevel < 0.01 )
				<img class="imgw" src="${path}/static/res/webapp/img/2.png" />
				#elseif( $healthLevel >= 0.01 && $healthLevel < 0.03)
				<img class="imgw" src="${path}/static/res/webapp/img/1.png" />
				#elseif( $healthLevel >= 0.03 && $healthLevel < 0.05)
				<img class="imgw" src="${path}/static/res/webapp/img/7.png" />
				#elseif( $healthLevel >= 0.05 && $healthLevel < 0.1)
				<img class="imgw" src="${path}/static/res/webapp/img/3.png" />
				#elseif( $healthLevel >= 0.1)
				<img class="imgw" src="${path}/static/res/webapp/img/8.png" />
				#end
			</div>
			<div class="detail-right flex1">
					<div class="detail-r-t jflex">
						<div class="drt-title flex1">咕哒健康度</div>
						#if($healthLevel < 0.01 )
						<div><div class="tinfo-bar hb1">正常</div></div>
						#elseif( $healthLevel >= 0.01 && $healthLevel < 0.03)
						<div><div class="tinfo-bar hb2">低烧</div></div>	
						#elseif( $healthLevel >= 0.03 && $healthLevel < 0.05)
						<div><div class="tinfo-bar hb3">高烧</div></div>
						#elseif( $healthLevel >= 0.05 && $healthLevel < 0.1)
						<div><div class="tinfo-bar hb4">昏厥</div></div>
						#elseif( $healthLevel >= 0.1)
						<div><div class="tinfo-bar hb5">弥留</div></div>
						#end
					</div>
					<div class="detail-r-b jflex">
						<img class="det-img" src="${path}/static/res/webapp/img/s2.png" />
						在本FOODBAR统计时段内，忘记付款的零食次数影响了咕哒健康程度，请让咕哒健康起来呀~
					</div>
					
					<div class="detail-infos hide">
						<div class="jflex dei-line">
							<div class="flex1">X &lt;= 0.01</div>
							<div class="flex1 textright">正常</div>
						</div>
						<div class="jflex dei-line">
							<div class="flex1">0.01 &lt;=X&lt; 0.03</div>
							<div class="flex1 textright">低烧</div>
						</div>
						<div class="jflex dei-line">
							<div class="flex1">0.03 &lt;=X&lt; 0.05</div>
							<div class="flex1 textright">高烧</div>
						</div>
						<div class="jflex dei-line">
							<div class="flex1">0.05 &lt;=X&lt; 0.1</div>
							<div class="flex1 textright">昏厥</div>
						</div>
						<div class="jflex dei-line">
							<div class="flex1">0.1 &lt;= X</div>
							<div class="flex1 textright">弥留</div>
						</div>
					</div>
					
					<div class="detail-r-open">展开</div>
					
			</div>
		</div>
		<div class="tdtail-line"></div>
		<div class="jflex tifon-detailbox">
			<div class="detail-icon">
			#if($satisfaction < 100 )
			<img class="imgw" src="${path}/static/res/webapp/img/6.png" />
			#elseif( $satisfaction >= 100 && $satisfaction < 200)
			<img class="imgw" src="${path}/static/res/webapp/img/5.png" />
			#elseif( $satisfaction >= 200 && $satisfaction < 500)
			<img class="imgw" src="${path}/static/res/webapp/img/9.png" />
			#elseif( $satisfaction >= 500 && $satisfaction < 1000)
			<img class="imgw" src="${path}/static/res/webapp/img/10.png" />
			#elseif( $satisfaction >= 1000)
			<img class="imgw" src="${path}/static/res/webapp/img/10.png" />
			#end
			</div>
			<div class="detail-right flex1">
					<div class="detail-r-t jflex">
						<div class="drt-title flex1">咕哒满意度</div>
						<div>
							#if($satisfaction < 100 )
							<div class="tinfo-bar hb21">饥饿</div>
							#elseif( $satisfaction >= 100 && $satisfaction < 200)
							<div class="tinfo-bar hb22">半饱</div>
							#elseif( $satisfaction >= 200 && $satisfaction < 500)
							<div class="tinfo-bar hb23">小满足</div>
							#elseif( $satisfaction >= 500 && $satisfaction < 1000)
							<div class="tinfo-bar hb24">大满足</div>
							#elseif( $satisfaction >= 1000)
							<div class="tinfo-bar hb25">肉灵合一</div>
							#end
						</div>
					</div>
					<div class="detail-r-b jflex">
						<img class="det-img" src="${path}/static/res/webapp/img/s1.png" />
						近一周内您所购买零食，将为咕哒不断补充营养哦~（X为近一周消费金额）
					</div>
					
					<div class="detail-infos hide">
						<div class="jflex dei-line">
							<div class="flex1">X&lt;=100</div>
							<div class="flex1 textright">饥饿</div>
						</div>
						<div class="jflex dei-line">
							<div class="flex1">100&lt;=X&lt;200</div>
							<div class="flex1 textright">半饱</div>
						</div>
						<div class="jflex dei-line">
							<div class="flex1">200&lt;=X&lt;500</div>
							<div class="flex1 textright">小满足</div>
						</div>
						<div class="jflex dei-line">
							<div class="flex1">500&lt;=X&lt;1000</div>
							<div class="flex1 textright">大满足</div>
						</div>
						<div class="jflex dei-line">
							<div class="flex1">100&lt;=X&lt;200</div>
							<div class="flex1 textright">肉灵合一</div>
						</div>
					</div>
					
					<div class="detail-r-open">展开</div>
					
			</div>
		</div>
	</div>
</div>
<!--顶部两个指数结束-->

<input type="hidden" id="h5Client" value="$!{h5Client}">
<div id="firstitem" class="">
	<div id="firstitem-title">
		${satisfaction}-${healthLevel}$!{item.itemName}
	</div>
	<div id="firstitem-img">
		<img src="${item.mainImg}" class="img" id="firstitem-mainImg"/>
	</div>
	<div id="firstFee">
			#if($item.hasDiscount)
				#set($fee = $!item.discountPrice)
				<!-- 优惠价 -->
				<span id="ifee1"></span>
				<span id="ifee2">￥$!item.discountPrice</span>
				<!-- 原价 -->
				<span id="ifee3">￥$!item.retailPrice</span>
			#else
				#set($fee = $!item.retailPrice)
				<!-- 无优惠 -->
				<input type='hidden' class="itemPrice" value="$!item.retailPrice">
				<span id="ifee2">￥$!{item.retailPrice}</span>
				<span id="ifee3" class="hide"></span>
			#end
	</div>
</div>

<div id="item-listbox" class="hide" style="overflow-y:scroll">
	<div id="firstgitem" class="gitem animated gitem-small" data-title="$!item.itemName">
		<input type="hidden" class="itemId" value="$!{item.id}">
		<div class="gitem-img">
			<img src="${item.mainImg}" class="img mainImg" alt="加载中..."/>
		</div>
		<div class="gitem-fees">
			#if($item.hasDiscount)
				<!-- 有优惠 -->
				<span class="gitem-buyfee red">￥&nbsp;$!{item.discountPrice}</span>
				<span class="gitem-oldfee">￥&nbsp;$!item.retailPrice</span>
				<input type="hidden" class="itemPrice" value="$!{item.discountPrice}">
			#else
				<!-- 无优惠 -->
				<input type="hidden" class="itemPrice" value="$!item.retailPrice">
				<span class="gitem-buyfee red">￥&nbsp;$!item.retailPrice</span>
			#end
		</div>
		<a class="gitem-close" href="#" onclick="bindDel(this)"><i class="iconfont icon-close"></i></a>
	</div>
</div>

<div id="paycount">
	总共需要支付：￥<span class="red" id="feecount">$!{fee}</span>
</div>

<input type="hidden" value="$!item.exp" id="itemIsExp">


<!--底部按钮-->
<div id="paybtns">
	<div class="jflex">
		<div class="pabnull"></div>
		<div class="buynowbox">
			#if($item.exp) 
				<a id="buynow" style="background: #848484;">过期商品,请勿购买</a>
			#else
				<a id="buynow">立即购买</a>
			#end
		</div>
		<div class="pabnull2"></div>
		<div class="buy-scan">
			<a id="scanbtn" class="iconfont icon-saoyisao"></a>
		</div>
		<div class="pabnull"></div>
	</div>
<!-- 	<div style="font-size: 8px;">$!{h5Client}-调试信息:用户ID:${thirdUserId}</div> -->
</div>
<!--底部按钮结束-->
<script id="item-tpl" type="text/html">
	<div class="gitem animated gitem-small" data-title="{{itemName}}">
		<input type="hidden" class="itemId" value="{{id}}">
		<div class="gitem-img">
			<img src="{{mainImg}}" class="img mainImg" alt="加载中..."/>
		</div>
		<div class="gitem-fees">
			{{if hasDiscount}}
				<span class="gitem-buyfee red">￥{{discountPrice}}</span>
				<span class="gitem-oldfee">￥{{retailPrice}}</span>
				<input type="hidden" class="itemPrice" value="{{discountPrice}}">
			{{else}}
				<span class="gitem-buyfee red">￥{{retailPrice}}</span>
				<input type="hidden" class="itemPrice" value="{{retailPrice}}">
			{{/if}}
		</div>
		<a class="gitem-close" href="#" onclick="bindDel(this)"><i class="iconfont icon-close"></i></a>
	</div>
</script>
#parse("/WEB-INF/views_webapp/layout/bottom.html")

<script>
document.documentElement.style.fontSize = (document.documentElement.clientWidth / 7.5) + 'px';
//顶部指数的点击事件
$(function(){
	$("#tinfo").click(function(){
		if($(this).hasClass("opened")){
			$(this).removeClass("opened");
			$("#tinfo-detail").removeClass("bounceInDown").addClass("bounceOutUp");
		}else{
			$(this).addClass("opened");
			$("#tinfo-detail").removeClass("hide").addClass("bounceInDown");
		}
		
	});
	
	$(".detail-r-open").click(function(e){
		if($(this).html()=="展开"){
			$(this).html("收起");
		}else{
			$(this).html("展开");
		}
		$(this).prev().toggleClass("hide");
		 e.stopPropagation();    //  阻止事件冒泡
	});
});
</script>

#if($h5Client == "zfb")
	<script type="text/javascript" src="https://as.alipayobjects.com/g/component/antbridge/1.1.1/antbridge.min.js"></script>
	<script type="text/javascript" src="$!{path}/static/res/webapp/js/item/zfb_qr_scan.js"></script>
#elseif($h5Client == "yzf")
	<script type="text/javascript" src="$!{path}/static/res/webapp/js/bestpay.api.js?1=1"></script>
	<script type="text/javascript">
		var shelfName = "$shelfName";
		window.onload = function(){
			App.setTitle(shelfName == "" ? "咕哒猎人" : shelfName);
		}
		
		function yzfQrScan(callback){
			var resultcode = Scanner.scan(function(a,b){
				$.ui.tip("扫码失败!");
			}, function(a,b){
				callback(a);
			});
		}
	</script> 
#elseif($h5Client == "wx")
	<!--如果是微信客户端，需要以下代码--->
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="$!{path}/static/res/webapp/js/item/wx_qr_scan.js"></script>
	<script type="text/javascript">
		try {
			wx.config({
				// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				debug : false, 
				// 必填，公众号的唯一标识
				appId : '${config.appId}', 
				// 必填，生成签名的时间戳
				timestamp : '${config.timestamp}', 
				// 必填，生成签名的随机串
				nonceStr : '${config.nonceStr}', 
				// 必填，签名，见附录1
				signature : '${config.signature}',
				// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				jsApiList : [ 'scanQRCode' ]
			});
		} catch (e) {
			$.ui.alert("系统提示:", "微信config初始化异常!");
		}
		wx.ready(function() {
			WeixinJSBridge.call('hideOptionMenu');
		});
	</script>
#elseif($h5Client == "dd")
	<script type="text/javascript" src="http://g.alicdn.com/ilw/ding/0.7.3/scripts/dingtalk.js"></script>
	<script type="text/javascript">	
	var _config = ${config};
	var needLogin = ${needLogin};
	dd.config({
				agentId : _config.agentid,
				corpId : _config.corpId,
				timeStamp : _config.timeStamp,
				nonceStr : _config.nonceStr,
				signature : _config.signature,
				jsApiList : [ 'runtime.info', 'biz.contact.choose',
						'device.notification.confirm', 'device.notification.alert',
						'device.notification.prompt', 'biz.ding.post',
						'biz.util.openLink','biz.user.get',"biz.util.scan" ]
	});
	
	dd.ready(function() {
		dd.runtime.info({
			onSuccess : function(info) {
			},
			onFail : function(err) {
				alert('fail-runtime: ' + JSON.stringify(err));
			}
		});
	
		if(needLogin){
			dd.biz.user.get({
			    onSuccess: function (info) {
			    	//调用后台接口-自动登录
			    	//alert(JSON.stringify(info));
			    	var userInfo = {"corpId":_config.corpId, "nickName": info.nickName, "thirdUserId":info.id, "avatar": info.avatar};
			    	autoLogin(userInfo);
			    },
			    onFail: function (err) {
			    	alert("错误:"+JSON.stringify(err));
			    }
			});
		}
	});
	
	dd.error(function(err) {
		alert('钉钉发生错误: ' + JSON.stringify(err));
	});
	
	function autoLogin(userInfo){
		$.ajax({
		    type: 'POST',
		    url: path+"/h5/dd/login" ,
		    data: userInfo,
		    dataType:"json",
		    success: function(resp){
		    	if(resp.data == null){
		    		$.ui.unmask();
					return $.ui.alert("系统提示:", "未查询到商品信息!");
		    	}
		    	if(resp.code != 200){
		    		$.ui.unmask();
					return $.ui.alert("系统提示:", resp.msg);
		    	}
		    	
		    	var data = resp.data;
		    	
		    } ,
		    error : function() {  
	    		$.ui.unmask();
	    		$.ui.alert("系统提示:", "查询商品信息异常！");
	    	} 
		});
	}
	
	function ddQrScan(callback){
		dd.biz.util.scan({
		    type: "qrCode",
		    onSuccess: function(data) {
		    	callback(data.text);
		    },
		   onFail : function(err) {
			   alert("扫描二维码失败!");
		   }
		});
	} 
	</script>
#else
#end

<script type="text/javascript">
//获取屏幕的宽度
	var h5Client = document.getElementById("h5Client").value;
	var itemIsExp = $("#itemIsExp").val();
	$(function(){
		$("#scanbtn").click(function(){
			scan();
		});
		//购买
		$("#buynow").click(function(){
			if(itemIsExp == "true"){
				return;
			}
			$.ui.mask("客官稍等……");
			//获取所有购买的商品id
			var ids = $(".itemId");
			var idArray = new Array();
			$.each(ids, function(index, row){ 
				idArray.push($(row).val());
			});
			var idsStr = idArray.join(",");
			if(h5Client == "zfb"){
				window.location.href = path + "/h5/zfb/pay?ids=" + idsStr;
			}else if(h5Client == "wx"){
				window.location.href= path + "/h5/wx/pay?ids=" + idsStr;
			}else if(h5Client == "dd"){
				window.location.href = path + "/h5/zfb/pay?ids=" + idsStr;
			}else if(h5Client == "yzf"){
				window.location.href = path + "/h5/yzf/pay?ids=" + idsStr + "&userPhone=" + User.getProduct() + "&nickName=" + User.getProduct();
			}
		});
		
		
		$("#shelfInfo").click(function(){
			if($("#shelfInfoDetail").hasClass("hide")){
				$("#xztime").addClass("xuanzhuan");
				$("#shelfInfoDetail").removeClass("hide").addClass("bounceInDown");
			}else{
				$("#xztime").removeClass("xuanzhuan");
				$("#shelfInfoDetail").removeClass("bounceInDown").addClass("bounceOutUp").addClass("hide");
			}
		});
		
		$(".zhankai").click(function(event){
			 event.stopPropagation();
			 var t=$(this).prev();
				t.toggleClass("hide");
				if(t.hasClass("hide")){
					$(this).find(".sdrmore").html("展开");
				}else{
					$(this).find(".sdrmore").html("收起");
				}
		});
		
		
	});
	
	function bindDel(ele){
			var that=$(ele).parent();
			//$.ui.confirm("删除确认","我辣么好吃，确认不要了？",function(){
				minusTotalFee(that.children(".gitem-fees").find(".itemPrice").val());
				that.addClass("bounceOut");
				window.setTimeout(function(){
					  $(ele).parent().remove();
					  if($(".gitem").length==1){
						var lastItem = $(".gitem");
						//商品标题
					 	document.getElementById("firstitem-title").innerHTML= $(".gitem").attr("data-title");
						//销售价格
						document.getElementById("ifee2").innerHTML= $(".gitem").find(".gitem-buyfee").html();
						
						document.getElementById("firstitem-mainImg").setAttribute("src", document.querySelector(".mainImg").getAttribute("src"));
						
						if($(".gitem").find(".gitem-oldfee").length > 0){
							//原价
							$("#ifee3").removeClass("hide").show();
							document.getElementById("ifee3").innerHTML="原价"+ $(".gitem").find(".gitem-oldfee").html();
							//是否显示优惠价三个字
							$("#ifee1").removeClass("hide").show();
						}else{
							$("#ifee2").html($(".gitem").find(".gitem-buyfee").html());
							$("#ifee3").hide();
							$("#ifee1").hide();
						} 
						
						$("#firstitem").show();
	    		        $("#item-listbox").hide();
					}
				},1000);
			//});
	}
	
	function scan(){
		if(h5Client == "zfb"){
			eval("zfbQrScan(addItem)")
		}else if(h5Client == "wx"){
			eval("wxQrScan(addItem)")
		}else if(h5Client == "dd"){
			eval("ddQrScan(addItem)")
		}else if(h5Client == "yzf"){
			eval("yzfQrScan(addItem)")
		}
	}
	
	function addItem(qrData){
		if(qrData == null || qrData == ""){
			return $.ui.alert("系统提示:", "二维码数据为空!");
		}
		var id = qrData.substring(qrData.lastIndexOf("/") + 1,qrData.length);
		if(id == ""){
			return $.ui.alert("系统提示:", "二维码数据中不包含商品信息!");
		}
		
		//判断商品是否已扫过码
		if($(".itemId[value='" +id+ "']").length > 0){
			return $.ui.alert("系统提示:", "此商品已扫码!");
		}
		
		if(itemIsExp == "true"){
			var ids = $(".itemId");
			var idArray = new Array();
			$.each(ids, function(index, row){ 
				idArray.push($(row).val());
			});
			
			if(ids.length == 1){
				window.location.href = qrData;
			}
			
			return;
		}
		
    	//从服务器获取商品信息
    	$.ui.mask("客官稍等……");
		$.ajax({
		    type: 'POST',
		    url: path+"/h5/item/getItem" ,
		    data: {id:id},
		    dataType:"json",
		    success: function(resp){
		    	if(resp.data == null){
		    		$.ui.unmask();
					return $.ui.alert("系统提示:", "未查询到商品信息!");
		    	}
		    	if(resp.code != 200){
		    		$.ui.unmask();
						return $.ui.alert("系统提示:", resp.msg);
		    	}
		    	
		    	var data = resp.data;
		    	if(data.exp){
		    		$.ui.unmask();
		    		$.ui.alert("系统提示:", "您刚刚扫描的商品已过期<br>请勿购买，后续会有专人回收并销毁");
		    		return; 
		    	}
		    	
		    	//获取第一个商品的宽度，用于
	    		var _tpl=template("item-tpl",data);
	    		//如果是第二个
	    		$(".foodinfo100").removeClass("foodinfo100");
	    		//if($("#item-listbox").is(":hidden")){
	    		       $("#firstitem").hide();
	    		       $("#item-listbox").show();
	    		//}
	    		document.getElementById("item-listbox").insertAdjacentHTML("beforeEnd", _tpl);
	    		$(".gitem-img").height($(".gitem-img").width());
	    		//更新总价
	    		var nowCount=$("#feecount").html();
	    		var price = 0;
	    		if(data.hasDiscount){
	    			price = data.discountPrice;
	    		}else{
	    			price = data.retailPrice;
	    		}
	    		var fee = parseFloat(nowCount) + parseFloat(price);
    			fee = fee.toFixed(2);
	    		$("#feecount").html(fee);
	    		
	    		$.ui.unmask();
		    } ,
		    error : function() {  
	    		$.ui.unmask();
	    		$.ui.alert("系统提示:", "查询商品信息异常！");
	    	} 
		});
	}
	
	function minusTotalFee(fee){
		var feecount = $("#feecount").html();
		var fee = parseFloat(feecount) - parseFloat(fee);
		fee = fee.toFixed(2);
		$("#feecount").html(fee);
	}
	
</script>
</body>
</html>